<template>
	<view class="selectMask" v-if="state.showMask" @click.stop.prevent="onTapMask" >
		<view class="" @touchmove="onTapMask" >
			<!-- 遮罩层滑动和点击触发 -->
		</view>
	</view>
	<view class="selectBox">
		<view class="selectBox-topBox flex" :style="selectStyle" v-if="data.selectData&&data.selectData.length">
			<view class="topBox-item flex-aic-jcc" v-for="(item,i) in data.selectData" :key="item" @click="onActive(item,i)"
			:style="{color:selectColor(i) }">
				{{(state.childrenActive[i]!==''&&state.childrenActive[i]!==undefined&&item.children.length)?item.children[state.childrenActive[i]].name :item.name }} 
				<view class="">
					<view :class="{rotate:state.active===i}"><uni-icons type="bottom" size="14" :color="selectColor(i)"></uni-icons></view>
				</view>
			</view>
		</view>
		<view class="selectBox-drawer flex  fww-acfs" :class="[{open:state.selectOpen}]" :style="selectBoxStyle">
			<view class="drawer-item" v-for="(item,i) in state.children" :style="{width:data.optionMode ==1 ? '100%':'25%'}"  @click="tapOption(item,i)">
				<view class="flex-aic-jcc" :style="state.childrenActive[state.active]===i ?  {...optionStyle,...optionActiveStyle}: optionStyle">
					{{item.name}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	  const emit = defineEmits(['setClass']);


	const state = reactive({
		active:false,
		selectOpen:false,
		showMask:false,
		children:[],
		childrenActive:[],
		setData:{}
	});
	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
	});
	
	const selectColor=(i)=>{
		return state.active===i? props.data.selectStyle.activeColor:props.data.selectStyle.color
	}
	
	const tapOption=  (e,i)=>{
	   if(state.childrenActive[state.active]===i){
		   state.childrenActive[state.active]=''
	   }else{
		   state.childrenActive[state.active]=i
	   }
		let count =0
		props.data.selectData.forEach((item,i)=>{
		  if(item.children.length&&state.childrenActive[i]!==''&&state.childrenActive[i]!==undefined){
			  if(state.setData[item.keyName]===item.children[state.childrenActive[i]].value) return 
			  state.setData[item.keyName]=item.children[state.childrenActive[i]].value||''
			 count = count + 1
		  }
	  })
	  if(count){
		  console.log('修改后数据',{...state.setData});
		  emit('setClass',{...state.setData})
	  }
	  offFn()
	}
	
	const openFn = (e,i)=>{
		state.selectOpen=true
		state.showMask = true
		state.children=e.children
		state.active=i
		
	}
	const offFn = ()=>{
		state.selectOpen=false
		state.showMask = false
		state.active=''
	}
	const onActive = (item,i)=>{
		if(state.active===i){
			offFn()
		}else{
			openFn(item,i)
		}
	}
	const onTapMask = () => {
		if(!state.showMask)return
		console.log('点击了遮罩层');
		offFn()
	}

	const Justifyflex =(mode)=>{
	  switch (mode) {
		case 1:
		  return 'space-between'
		case 2:
		  return 'space-evenly'
		case 3:
		  return 'flex-start'
	  
		default:
		 return 'space-between'
	  }
	}
	const optionStyle = computed(() => ({
	  color: `${props.data.optionStyle.color}`,
	  backgroundColor: `${props.data.optionStyle.optionBackgroundColor}`,
	  borderRadius: `${props.data.optionStyle.optionBorderRadius}px`,
	  padding: props.data.optionMode ==1?'0 10px':'0',
	  justifyContent:props.data.optionMode ==1 ?'flex-start':'center'
	}));
	
	const optionActiveStyle = computed(() => ({
	  color: `${props.data.optionStyle.activeColor} !important`,
	  backgroundColor: `${props.data.optionStyle.activeOptionBackgroundColor}`,
	  borderColor: `${props.data.optionStyle.activeBorderColor} !important`,
	}));
	
	 const selectBoxStyle = computed(() => ({
	  backgroundColor: `${props.data.selectBoxStyle.backgroundColor}`,
	  padding: `${props.data.selectBoxStyle.padding}px`,
	  borderRadius: `0 0 ${props.data.selectBoxStyle.borderRadius}px ${props.data.selectBoxStyle.borderRadius}px`,
	}));

	const selectStyle = computed(() =>({
		backgroundColor: `${props?.data.selectStyle.backgroundColor}`,
		paddingLeft: `${props?.data.selectStyle.padding}px`,
		paddingRight: `${props?.data.selectStyle.padding}px`,
		justifyContent: Justifyflex(props.data.selectMode)
	}));
</script>

<style lang="scss" scoped>
	*{
	}
	.selectMask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		z-index: 5;
		background: rgba(0,0,0,0.15);
		&>view{
			height: 100%;
			width: 100%;
		}
	}
	.rotate {
		transform: rotate(180deg);
	}
	.selectBox{
		box-sizing: border-box;
		width: 100vw;
		position: relative;
		z-index: 10;
		.selectBox-topBox{
			.topBox-item{
				width: 24%;
				height: 80rpx;
				font-size: 28rpx;
				&>view{
					padding-left: 8rpx;
					&>view{
						transition: 0.2s;
					}
				}
			}
		}
		.selectBox-drawer{
			box-sizing: border-box;
			transform-origin:top;
			width: 100vw;
			position: absolute;
			top: 80rpx;
			z-index: 10;
			transform: scaleY(0);
			height: 350rpx;
			// overflow-y: scroll;
			overflow-x: hidden;
			transition: 0.2s;
			  &:-webkit-scrollbar{
			    width: 0 !important;
			    height: 0 !important;
			  }
			.drawer-item{
				padding: 10rpx;
				&>view{
					flex: 1;
					height: 55rpx;
					border:1rpx solid rgba(0,0,0,0);
				}
			}
		}
		.open{
			transform: scaleY(1);
		}
	}
</style>